<template>
  <div class="cmscomen customMana">
    <div class="infoTable" :style="{ paddingLeft: paddingWidth + 'px'}">
      <div class="topMenu">
        <span>信息流数据管理</span>
        <span style="padding:0 4px;">/</span>
        <span class="two">客户管理</span>
      </div>
      <div class="formInfo">
        <el-date-picker
          v-model="dateValue"
          type="daterange"
          align="right"
          @change="dateChange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
        <el-select v-model="customer_items.model_value" :placeholder="customer_items.placeHolder" clearable filterable @change="selectProInfo">
          <el-option
              v-for="item in customer_items.options"
              :key="item.customerCode"
              :label="item.customerName"
              :value="item.customerCode">
          </el-option>
        </el-select>
      </div>
      <div class="accountBtn">
        <el-row>
          <el-button type="primary">导出数据</el-button>
          <el-button type="primary" @click="newCus">新建客户</el-button>
        </el-row>
      </div>
      <div class="accountWra">
        <div class="AccounTop"></div>
        <div class="AccountableWar gxw-con">
            <el-table
                v-loading="loading"
                element-loading-text="拼命加载中"
                :data="tableData"
                border
                stripe
                style="width: 100%">
                <el-table-column
                    v-for="c in table_column"
                    :key="c.prop"
                    :fixed="c.fixed"
                    :sortable="c.sortable"
                    :prop="c.prop"
                    :label="c.label"
                    :formatter="c.format"
                    width="auto"
                    :min-width="c.minwidth"
                    v-if="c.visible">
                </el-table-column>
                <el-table-column
                    align="center"
                    label="操作"
                    min-width="100"
                    width="100"
                    class-name="exitBut">
                    <template slot-scope="scope">
                        <div>
                            <el-tooltip class="item" effect="dark" content="详情" placement="top">
                                <el-button style="padding:3px 3px" type="info" class="inlineBox icon iconfont  icon-xiangqing" circle  @click.stop="seeDetail(scope.row.time,scope.row.id)"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="资料" placement="top">
                                <el-button style="padding:3px 3px" type="primary" class="inlineBox icon iconfont icon-ziliao" circle  @click.stop="seeData(scope.row.id)"></el-button>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page.currentPage"
            :page-sizes="page.sizes"
            :page-size="page.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.count">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name:'accountData',
  data(){
    return{
      currentPage4: 4,
      value: '',
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
      options: [],
      value1: '',
      tableData: [],
      loading: false,
      detailStatus: false,
      dataStatus: false,
      visibleMenuSelectStatus: false,
      checkedCities: ['日期', '客户名称', 'wifi消耗', '猎豹消耗', '趣头条消耗', '合计消耗'],
      cities: ['日期', '客户名称', 'wifi消耗', '猎豹消耗', '趣头条消耗', '合计消耗'],
      citiesFilterVal: ['time', 'customerName', 'listConsumeWifi', 'listConsumeLiebao', 'listConsumeQtt', 'totalConsume'],
      table_column: [
          {fixed: true, prop: 'time', label: '日期', sortable: true, visible: true,minwidth:100},
          {fixed: false, prop: 'customerName', label: '客户名称', sortable: false, visible: true,minwidth:280},
          {fixed: false, prop: 'listConsumeWifi', label: 'wifi消耗', sortable: false, visible: true,format: function (row, col){
              return row.listConsume[0].todayConsumer;
          }},
          {fixed: false, prop: 'listConsumeLiebao', label: '猎豹消耗', sortable: false, visible: true,format: function (row, col){
              return row.listConsume[1].todayConsumer;
          }},
          {fixed: false, prop: 'listConsumeQtt', label: '趣头条消耗', sortable: false, visible: true,format: function (row, col){
              return row.listConsume[2].todayConsumer;
          }},
          {fixed: false, prop: 'totalConsume', label: '合计消耗', sortable: false, visible: true},
      ],
      detailDataCol: [
          {fixed: false, prop: 'time', label: '日期', sortable: true, visible: true},
          {fixed: false, prop: 'productName', label: '产品', sortable: false, visible: true},
          {fixed: false, prop: 'platformName', label: '平台', sortable: false, visible: true},
          {fixed: false, prop: 'totalConsume', label: '消耗', sortable: false, visible: true},
          {fixed: false, prop: 'discdConsume', label: '折后消耗', sortable: false, visible: true},
      ],
      page: {
          sizes: [10, 20, 50,100,200,500],
          offset: 1,
          limit: 10,
          count: 0,
          currentPage: 1,
      },
      detailData: [],
      ziliaoData: [],
      dateValue: '',
      customer_items: {
          model_value: '',
          placeHolder: '客户',
          options: []
      },
      params: {
          stime: '',
          etime: '',
      },
      isFirstEnter:false, // 是否第一次进入，默认false

      // 要展开的行，数值的元素是row的key值
      expands: [],
      source:null,
    }
  },
  computed:{
    paddingWidth(){
      return this.$store.state.paddingWidth;
    }
  },
  created() {
    this.customer();
  },
  methods: {
      cancelQuest(){
        if(typeof this.source ==='function'){
            this.source('终止请求'); //取消请求
        }
      },
      selectProInfo(){
        this.pageInfo();
      },
      /*客户*/
      customer() {
          this.$http({
              method: 'get',
              url: this.apiUrl.fdpCusGetCustomerList,
          }).then(res => {
              if (res.status == 200) {
                  var data = res.data;
                  this.customer_items.options = data;
              } else {
              }
          }).catch(error => {
              console.log(error);
          });
      },
      /*查询表格数据*/
      pageInfo() {
          this.tableData=[];
          this.loading=true;
          const _this = this;
          this.cancelQuest(); //在请求发出前取消上一次未完成的请求
          this.$http({
              method: 'get',
              url: this.apiUrl.fdpCusSearchCustomer,
              params: {
                  offset: this.page.offset,
                  limit: this.page.limit,
                  customerCode: this.customer_items.model_value,
                  stime: this.params.stime,
                  etime: this.params.etime,
              },
              cancelToken: new axios.CancelToken(function executor(c) {_this.source = c;})
          }).then(res => {
              this.loading=false;
              console.log(res);
              if (res.status = 200) {
                  this.page.count = res.data.totalNums;
                  this.tableData = res.data.items;
              }
          }).catch(err => {
                if (axios.isCancel(err)) {
                    _this.loading=false;
                    console.log('Request canceled', err.message);
                    console.log(_this.loading)
                } else {
                    _this.loading=false;
                }
          });
      },
      /*查询详情数据*/
      detailInfo(time,id){
          this.$http({
              method: 'get',
              url: this.apiUrl.fdpCusSearchCustomerDetail,
              params: {
                  time: time,
                  id: id,
              }
          }).then(res => {
              console.log(res);
              if (res.status = 200) {
                  this.detailData = res.data;
              }
          }).catch(err => {
          });
      },
      // 获取row的key值
      getRowKeys(row) {
          return row.id;
      },
      /*查询资料数据*/
      ziliaoInfo(id){
          this.$http({
              method: 'get',
              url: this.apiUrl.fdpCusGetCustomer,
              params: {
                  id: id,
              }
          }).then(res => {
              console.log(res);
              if (res.status = 200) {
                  this.ziliaoData =[res.data];
                  this.expands.push(this.ziliaoData[0].id);
              }
              console.log(this.ziliaoData);
          }).catch(err => {
          });
      },
      /*页码翻页*/
      handleCurrentChange(val) {
          this.page.offset = val;
          this.pageInfo();
      },
      /*改变每页条数*/
      handleSizeChange(val) {
          this.page.limit = val;
          this.pageInfo();
      },
      /*显示、隐藏表格列*/
      checkedChange() {
          for (let item of this.table_column) {
              var index = this.checkedCities.indexOf(item.label);
              index >= 0 ? item.visible = true : item.visible = false;
          }
      },
      /*显示、隐藏表格列容易*/
      changeCheckStatus() {
          this.visibleMenuSelectStatus = !this.visibleMenuSelectStatus;
      },
      seeDetail(time,id){
          this.detailStatus=true;
          this.detailInfo(time,id);
      },
      seeData(id){
          this.dataStatus=true;
          this.ziliaoInfo(id);
      },
      exit(){
          this.detailStatus= this.dataStatus=false;
      },
      /*body事件*/
      bodyEvent() {
          this.visibleMenuSelectStatus =this.detailStatus=this.dataStatus= false;
      },
      /*改变时间选择器*/
      dateChange() {
          console.log(this.dateValue)
          if (this.dateValue != '' && typeof this.dateValue != 'undefined' && this.dateValue[0] != null && this.dateValue[1] != null) {
              this.params.stime = this.formatDateTime(this.dateValue[0], 'ymd');
              this.params.etime = this.formatDateTime(this.dateValue[1], 'ymd');
              this.pageInfo();
          } else {
              this.params.stime =this.params.etime = '';
          }
      },
      /*导出*/
      importData() {
          if (this.tableData.length == 0) {
              this.$message({
                  type: 'info',
                  message: '请查询数据'
              });
              return false;
          }
          let tHeader = this.citiesImport;
          let filterVal = this.citiesFilterVal;
          let importData = this.tableData;
          let fileName = [this.params.stime,this.params.etime, this.customer_items.model_value, '客户信息'].join('_');
          this.handleDownload(tHeader, filterVal, importData, fileName);
      },
      /*新建客户*/
      newCus(){
          this.$router.push({path:'/infoFlowData/newcustomer'});
      }
  }
}
</script>
<style>
.customMana .infoTable{
  width: 100%;
}
</style>

